<template>
  <!-- 二十五、分配角色 组件 -->
  <!-- 25.1使用 element-plus 组件库里面的 Select 选择器 --- 基础多选 写结构 -->
  <!-- 25.2去到父组件 admin.vue 里面引入子组件 -->
  <div class="allocrole_container">
    <!-- 25.3外面还要套一层 dialog 弹出 -->
    <!-- <el-dialog title="分配角色"> -->
    <!-- 25.10 :model-value 绑定父组件传过来的 show -->
    <!-- 25.11去到父组件 admin.vue 文件里面绑定 分配角色 的点击事件 -->
    <!-- <el-dialog :model-value="show" style="width:500px;" title=" 分配角色"> -->
    <!-- 25.43添加关闭事件, dialog 有 close 关闭事件 -->
    <el-dialog :model-value="show" style="width:500px;" title=" 分配角色" @close="closeAllocroleDialogFn">
      <!-- 25.50添加 multiple 的属性，才会出现每个小的 tag -->
      <el-select v-model="value1" multiple class="m-2" style="width:100%;" placeholder="请选择">
        <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> -->
        <!-- 25.31这里的 label 是 name , value 是id -->
        <!-- 25.32需要在一开始就显示 当前用户的角色 ，去到 http 文件夹里面的 api.ts 文件，发送接口请求 -->
        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <!-- 25.19添加按钮,取消跟确认 -->
      <template #footer>
        <!-- 25.68绑定关闭事件 -->
        <!-- 25.69去到 admin.vue 文件 -->
        <el-button @click="closeAllocroleDialogFn">取消</el-button>
        <!-- 25.51用户修改分配角色,发送请求,去到 http 文件夹里面的 api.ts-->
        <!-- 25.61绑定确定点击事件 -->
        <el-button type="primary" @click="SubmitAllocroleRole">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang='ts'>
import { ref, toRef, watch } from 'vue'
// 25.36导入接口
import { ApiGetListAll, ApiCurrentRolePlay, ApiUpdateRolePlay } from '@/http/api'
// @ts-ignore
import { ElMessage } from 'element-plus'

// 25.8子组件接收父组件的数据
const props = defineProps({
  // 25.9接收 show 用于控制 dialog 弹出框显隐的值
  show: {
    type: Boolean,
    default: false
  },
  // 25.35接收父组件传过来的id
  id: {
    type: Number,
    default: 0
  }
})

// 25.44子传父的 close 方法
const emit = defineEmits(['close'])

// 25.50 value是数字的数组类型
// const value = ref('')
const value1 = ref<number[]>([])

// 25.37定义id为响应式数据
const id = toRef(props, 'id')

// 25.45定义点击关闭的时候,触发事件
const closeAllocroleDialogFn = () => {
  emit('close')
  // 关闭的时候将value的值重新复制为空
  value1.value = []
}

// 25.20 这里的数据是从接口请求回来的,所以去到 http 文件夹里面的 api.ts 文件发送接口请求
// const options = [
//   {
//     value: 'Option1',
//     label: 'Option1',
//   },
//   {
//     value: 'Option2',
//     label: 'Option2',
//   },
//   {
//     value: 'Option3',
//     label: 'Option3',
//   },
//   {
//     value: 'Option4',
//     label: 'Option4',
//   },
//   {
//     value: 'Option5',
//     label: 'Option5',
//   },
// ]

// 25.28将这里options的数据是响应式数据,是接口返回的数据
const options = ref<IRoleModel[]>([])

// 25.23发送请求获取所有的角色数据
ApiGetListAll().then(res => {
  // 25.24这里查看到 Network 里面的接口返回数据,去到 api.d.ts 文件
  // 25.29接口发送请求成功
  if (res.code === 200) {
    // 查看接口返回的数据
    // console.log(res);
    // 25.30将接口返回的数据赋值给 options
    options.value = res.data
  }
})

// 25.38监听id是否发生变化，发送变化就请求当前 id 的角色信息
watch(id, () => {
  // 25.39如果为0就 return
  if (id.value === 0) {
    return
  }
  // 25.40如果不为0，就发送接口请求
  ApiCurrentRolePlay(id.value).then(res => {
    // 25.41获取到当前id的角色信息 res.data,发现跟上面 ApiGetListAll 接口返回的的类型是一样的，去到 http 文件夹里面的 api.ts 文件里面
    // 25.46如果请求成功
    if (res.code === 200) {
      // 25.47拿到数组里面的每个id
      let allId = res.data.map(item => item.id)
      // 25.48查看是否获取到对应的数据id
      // console.log(allId);
      // 25.49把里面的每个数据追加到 value 里面,因为是数组,所以要展开
      value1.value.push(...allId)
    }
  })
})


// 25.58用户点击确定的时候
const SubmitAllocroleRole = () => {

  // 25.59发送修改用户角色的角色
  // 25.60携带参数
  ApiUpdateRolePlay({
    adminId: id.value,
    roleIds: value1.value
  }).then(res => {
    // 25.62查看返回的结果，data 是数字，去到 http 文件夹里面的 api.ts 约束接口返回的类型
    // console.log(res);
    // 25.65如果接口请求成功
    if (res.code === 200) {
      // 25.66修改成功弹框提示
      ElMessage({
        type: 'success',
        message: '修改成功'
      })
      // 25.67调用关闭 dialog 的方法
      closeAllocroleDialogFn()
    }

  })
}

</script>
<style lang="less" scoped></style>